import React, { useState } from 'react';
import { EditableProTable } from '@ant-design/pro-table';
import ProField from '@ant-design/pro-field';
import ProCard from '@ant-design/pro-card';
import { Button } from 'antd';


export default ({ columns, value, onChange, rowKey, maxLength }) => {

  return (
    <EditableProTable
      columns={columns}
      maxLength={maxLength}
      rowKey={rowKey}
      value={value || []}
      onChange={onChange}
      recordCreatorProps={{
        newRecordType: 'dataSource',
        record: () => ({
          [rowKey]: Date.now(),
        }),
      }}
      editable={{
        type: 'multiple',
        editableKeys: value ? value.map((item) => item[rowKey]) : [],
        actionRender: (row, config, defaultDoms) => {
          return [defaultDoms.delete];
        },
        onValuesChange: (record, recordList) => {
          onChange(recordList);
        },
      }}
    />
  );
};